<template>
        <el-card shadow="never" style="max-height: 700px; overflow: auto">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">

                <!-- <el-form-item label="订单号:" prop="order_num">
                    <el-input v-model="form.order_num" placeholder="请输入订单号" clearable />
                </el-form-item> -->

                <!-- <el-form-item label="添加时间:" prop="create_time">
                    <el-date-picker
                        v-model="form.create_time"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                        @change="change_time"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item> -->

                <!-- <el-form-item prop="content"> -->
                    <template>
                        <div>
                            <el-table 
                            :data="list" 
                            border
                            show-summary
                            :summary-method="getSummaries"
                            style="width: 100%"
                            highlight-current-row ref="mytb">
                                <el-table-column v-for="(item, index) in purchase" :key="index" :label="item" property="test" align="center">
                                    <template slot-scope="{ row }">
                                    <span>{{ row[index] }}</span>

                                    <el-select v-if="item == '颜色'" v-model="row[index]" placeholder="请选择">
                                        <el-option
                                        v-for="item1 in colors"
                                        :key="item1.id"
                                        :label="item1.value"
                                        :value="item1.value">
                                        </el-option>
                                    </el-select>
                                    
                                    <el-input v-if="item == '统计'" v-model="row[index]" disabled></el-input>

                                    <el-input v-if="item !== '颜色' && item !== '状态' && item !== '统计'" @blur="blurs" v-model="row[index]"></el-input>
                                    </template>    
                                </el-table-column>
                            </el-table>
                        </div>
                    </template>
                <!-- </el-form-item> -->
                <el-form-item></el-form-item>
                <el-form-item>
                    <el-button @click="ok" type="success">统计</el-button>
                    <el-button type="primary" v-loading="exportLoading" @click="submitForm()">提交申请</el-button>
                    <!-- <el-button type="warning" @click="cancel">取消 </el-button> -->
                </el-form-item>
            </el-form>
        </el-card>
</template>

<script>
export default {
    name: 'EditFormDetail',
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
        
    },
    data() {
        return {
            create_timex: '',
            // batchx: '',
            colors: [],
            types: [],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                    picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                    picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', date);
                    }
                }]
            },
            list: [],
            purchase: [],
            sums2: [],
            sums_count: 0,
            color_id: 0,
            // 编辑表单验证规则
            rules: {
                brand: [{ required: true, message: "请输入编号", trigger: "blur" }],
                image: [{ required: true, message: "请输入产品图片", trigger: "blur" }],
                unit: [{ required: true, message: "请输入单位", trigger: "blur" }],
                inventory: [{ required: true, message: "请输入库存", trigger: "blur" }],
            },
            form: {  },
            product_id: 1,
            exportLoading: false,
            isSubmit: true,
        }
    },
    created () {
        // this.add_purchase_apply()
    },
    watch: { 
        findFormData: {
            handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        this.add_purchase_apply(nval);
                        // this.form = nval
                    })
                }
            },
            immediate: true,
            deep: false,
        },
        
    },
    methods: {
        blurs() {
            // this.getSummaries();
            // this.$refs.mytb.setCurrentRow();
        },
        ok() {
            this.$refs.mytb.setCurrentRow();
        },
        // change_batch(val) {
        //     for(let i =0;i<this.list.length;i++){
        //         this.list[i][this.batchx] = val;
        //     }
        // },
        getSummaries(param) {
            const { columns, data } = param;

            const sums = [];
            const sums2 = [];
            let length2 = 0;
            if(this.list[0] !== undefined){
                length2 = this.list[0].length;
                length2 = length2-1;
            }
            if(length2 !== 0){
                sums[length2] = 0;
                for(let i =0;i<data.length;i++){
                    for(let v =0;v<data[i].length-1;v++){
                        if(data[i] !== undefined){
                            if(v == 0){
                                sums[v] = '统计';
                            }else{
                                if(sums[v] == undefined){
                                    if(!isNaN(Number(data[i][v]))){
                                        sums[v] = Number(data[i][v]);
                                        sums[length2] = Number(sums[length2]) + Number(data[i][v]) 
                                    }else{
                                        sums[v] = 0;
                                        sums[length2] = 0;
                                    }
                                }else{
                                    if(!isNaN(Number(data[i][v]))){
                                        sums[v] = Number(sums[v])  + Number(data[i][v]);
                                        sums[length2] = Number(sums[length2]) + Number(data[i][v])
                                    }else{
                                        sums[v] = Number(sums[v]);
                                        sums[length2] = Number(sums[v]);
                                    }
                                }
                            }
                            if(sums2[i] == undefined){
                                if(!isNaN(Number(data[i][v]))){
                                    sums2[i] = Number(data[i][v]);
                                }else{
                                    sums2[i] = 0;
                                }
                            }else{
                                if(!isNaN(Number(data[i][v]))){
                                    sums2[i] = Number(sums2[i])  + Number(data[i][v]);
                                }else{
                                    sums2[i] = Number(sums2[i]);
                                }
                            }

                        }
                    }
                }
                for(let i =0;i<data.length;i++){
                    if(!isNaN(Number(sums2[i]))){
                        this.list[i][length2] = Number(sums2[i]);
                    }
                }
            }
            this.sums_count = sums[length2];
            sums[0] = '统计('+this.sums_count+')';
            return sums;
        },
        change_time(val) {
            if(val == '' || val == null){
                for(let i =0;i<this.list.length;i++){
                    this.list[i][this.create_timex] = 0;
                }
            }else{
                let post_create_time = val.getFullYear() + '-' + (val.getMonth() + 1) + '-' + val.getDate();
                for(let i =0;i<this.list.length;i++){
                    this.list[i][this.create_timex] = post_create_time;
                }
            }
        },
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },
        add_purchase_apply(response){
            let new_purchase = [];
            for(let i =0;i<response.table_header.length;i++){
                if(response.table_header[i] == 'batch'){
                    // this.batchx = i;
                    new_purchase[i] =  '批次号'
                }else if(response.table_header[i] == 'status'){
                    new_purchase[i] =  '审核状态'
                }else if(response.table_header[i] == 'admin_id'){
                    new_purchase[i] =  '申请人'
                }else if(response.table_header[i] == 'color'){
                    this.color_id = i;
                    new_purchase[i] =  '颜色'
                }else if(response.table_header[i] == 'create_time'){
                    this.create_timex = i;
                    new_purchase[i] =  'create_time'
                }else if(response.table_header[i] == 'color_sum'){
                    this.create_timex = i;
                    new_purchase[i] =  '统计'
                }else{
                    new_purchase[i] =  response.table_header[i]
                }
            }   
            console.log('response.product_id',response.product_id);
            
            this.list = response.data
            this.product_id = response.product_id
            this.purchase = new_purchase
            console.log(this.purchase,9999)
            this.colors = response.options.color_list
            this.types = response.options.type_list
        },
        submitForm() {
            if(this.isSubmit){
                this.isSubmit = false;
                this.exportLoading = true
                this.$refs.mytb.setCurrentRow();
                let list2 = this.list
                for(let i =0;i<list2.length;i++){
                    // list2[i][this.color_id] = this.transformation_color(list2[i][this.color_id]);
                }
                
                this.form.sku = list2;
                this.form.product_id = this.product_id;
                this.form.rep_num = this.sums_count;
                this.$refs['form'].validate((valid, obj) => {
                    if (valid) {
                        this.$emit('submitFormpurchase', this.form,this.purchase)
                    }
                })
            }
        },

        // 表单重置
        reset() {
            this.resetForm('form')
        },
        transformation_type($row){
            let rows = 0;
            for(let i =0;i<this.types.length;i++){
                if(this.types[i].value == $row){
                    rows = this.types[i].id
                }
            }
            return rows;
        },
        transformation_color($row){
            let rows = 0;
            for(let i =0;i<this.colors.length;i++){
                if(this.colors[i].value == $row){
                    rows = this.colors[i].id
                }
            }
            return rows;
        }
    }
}
</script>


<style lang="scss" scoped>
.el-table {
    // 默认情况下，即没有选中某一行时，只显示span
    span {
        display: block;
    }
    .el-input {
        display: none;
    }
    .el-select {
        display: none;
    }
  // 当点击某一行时，对应的行会添加current-row类，则内部的新的样式会生效
    .current-row {
        span {
        display: none;
        }
        .el-input {
            display: block;
        }
        .el-select {
            display: block;
        }
    }
}
</style>

<style lang="scss" scoped></style>>
